<!-- 针车周计划 -->
<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />
    <div class="flex mt10" style="width: 100%; background-color: white">
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }" style="width: 100%">
        <Table
          :outTableHeight="10"
          summary
          :tableHeader="tableHeader"
          :tableData="tableData"
          class="mt10"
          :isLoading="isLoading"
          @currentRow="currentRow"
        />
      </el-card>
    </div>
    <el-card shadow="never" :body-style="{ padding: '5px' }">
      <PageModule :PageData="{ total, buttonS: true }" @pageSizeChange="handleSizeChange" @pageChange="handleCurrentChange" />
    </el-card>
  </div>
</template>
<script lang="ts">
import { onMounted, ref } from 'vue'
import { watch } from 'vue'
import { debounce } from 'lodash'
import service from '@/utils/request'
import LoginWork from '@/utils/LoginWork'
import JMessage from '@/utils/JMessage'
export default {
  name: 'SewingWeeklyPlan'
}
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
function getMondayOfCurrentWeek() {
  const date = new Date()
  const day = date.getDay() // 获取当前是周几
  const diff = date.getDate() - day + (day === 0 ? -6 : 1) // 如果是周日，调整为上周一
  const monday = new Date(date.setDate(diff))

  const year = String(monday.getFullYear()) // 获取年份
  const month = String(monday.getMonth() + 1).padStart(2, '0') // 月份从0开始，需要加1
  const dayOfMonth = String(monday.getDate()).padStart(2, '0') // 获取日期

  return `${year}-${month}-${dayOfMonth}`
}
const getSundayOfCurrentWeek = () => {
  const date = new Date()
  const day = date.getDay()
  const diff = date.getDate() + ((7 - day) % 7) // 计算到周日的天数差
  const sunday = new Date(date.setDate(diff))

  const year = String(sunday.getFullYear())
  const month = String(sunday.getMonth() + 1).padStart(2, '0')
  const dayOfMonth = String(sunday.getDate()).padStart(2, '0')

  return `${year}-${month}-${dayOfMonth}`
}
const formList = ref([
  {
    type: 'dateSingle',
    dateLabel: '计划日期',
    placeholder: getMondayOfCurrentWeek(),
    dateValue: getMondayOfCurrentWeek()
  },
  {
    type: 'dateSingle',
    dateLabel: '至',
    placeholder: getSundayOfCurrentWeek(),
    dateValue: getSundayOfCurrentWeek()
  },
  {
    type: 'button',
    checkboxLabel: '查询'
  },
  {
    type: 'button',
    checkboxLabel: '置空'
  }
  // {
  //   type: 'button',
  //   checkboxLabel: '导出'
  // }
])

// 表一模块
// 表一按钮
const findClicked = (content: string) => {
  if (content === '查询') {
    getTableList()
  }
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
}
const imgList = ref([])
const tableHeader = ref([
  // {
  //   label: '序号',
  //   prop: 'seqNo'
  // },
  {
    label: '订单号',
    prop: 'orderId'
  },
  {
    label: '品牌',
    prop: 'brand'
  },
  {
    label: '样品类型',
    prop: 'sampleType'
  },
  {
    type: 'img',
    label: '图片',
    fixed: true,
    prop: 'photoName',
    srcList: imgList
  },
  {
    label: '鞋名',
    prop: 'style'
  },
  {
    label: '颜色',
    prop: 'color'
  },
  {
    label: '订单数量',
    prop: 'orderQty'
  },
  {
    label: '客户交期',
    prop: 'deliveryDate'
  },
  {
    label: '计划日期',
    prop: 'planDate'
  },
  {
    Multistage: true,
    label: '裁剪配套',
    children: [
      {
        backgroundColor: true,
        label: '欠数',
        prop: 'matchShort'
      },
      {
        label: '计划完成',
        prop: 'matchPlan'
      }
    ]
  },
  {
    Multistage: true,
    label: '针车辅料',
    children: [
      {
        backgroundColor2: true,
        label: '欠数',
        prop: 'mtlShort'
      },
      {
        label: '计划完成',
        prop: 'mtlPlan'
      }
    ]
  }
])
const tableData = ref([])
const isLoading = ref(true)

// 分页器
const currentPage = ref(1)
const pageSize = ref(40)
const total = ref(0)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableList()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getTableList()
}

// 获取表数据
const getTableList = debounce(async () => {
  isLoading.value = true
  let tableDataList = await service.post<any, any>(
    `/statements/getWeekPlan?choose=${5}&startDate=${
      formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '计划日期')
        ?.dateValue
    }&endDate=${
      formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '至')?.dateValue
    }&pageSize=${pageSize.value}&pageNum=${currentPage.value}`
  )
  isLoading.value = false
  currentRow()
  tableData.value = tableDataList.list.map((item: any) => {
    return {
      ...item,
      backgroundColor: Number(item.matchShort) === 0 ? '#339966' : 'white',
      backgroundColor2: Number(item.mtlShort) === 0 ? '#339966' : 'white'
    }
  })
  total.value = tableDataList.total
  imgList.value = tableDataList.list.map((item: any) => {
    return item.photoName
  })
}, 500)
onMounted(() => {
  getTableList()
})

// 点击表给另一张表传数据
const currentTableRow = ref({}) as any
const currentRow = async (row: any = tableData.value[0]) => {
  currentTableRow.value = row
}
</script>
